<template>
    <div style="height:100%;background:#F0F0F0">
        <yd-layout>   
            <yd-navbar slot="navbar" title="用户绑定" style="height:1rem;font-size:.1rem"></yd-navbar>
            
            <div v-if="isShow">
                <div style="height:.75rem"></div>
                <div style="height:1rem;text-align:center;font-size:.5rem;color:#2DC3E8;font-weight:bold">
                    贵州中医药大学图书馆
                </div>
                <div style="height:.3rem;margin:.1rem .2rem .1rem .2rem;color:gray;">
                    请用校园统计认证平台的账号和密码登录进行绑定
                </div>
                <div style="margin:.1rem .2rem .1rem .2rem">
                    <yd-cell-group>
                        <yd-cell-item>
                            <span slot="left">账号：</span>
                            <yd-input slot="right" required v-model="formItem.username" max="20" placeholder="请输入用户名"></yd-input>
                        </yd-cell-item>
                        <yd-cell-item>
                            <span slot="left">密码：</span>
                            <yd-input slot="right" type="password" v-model="formItem.password" placeholder="请输入密码"></yd-input>
                        </yd-cell-item>
                    </yd-cell-group> 
                    <div style="height:.5rem"></div>
                    <div>
                        <yd-button bgcolor="#2DC3E8" size="large" style="margin: .01rem;font-size:.5rem;font-weight:bold;color:white" v-show="isTj" @click.native="submit">提交</yd-button>
                    </div>  
                </div>
            </div>
            <div v-else>
                <div style="height:.25rem"></div>
                <div style="height:1rem;text-align:center;font-size:.5rem;color:#2DC3E8;font-weight:bold">
                    贵州中医药大学图书馆
                </div>
                <div>
                    <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                        <yd-cell-item>
                            <span slot="left" style="font-size:.3rem;font-weight:bold">状态：</span>
                            <span slot="right" style="font-size:.4rem;color:#2DC3E8;font-weight:bold">已绑定</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <span slot="left" style="font-size:.3rem;font-weight:bold">我的借书证号：</span>
                            <span slot="right" style="font-size:.4rem;color:#2DC3E8;font-weight:bold">{{dzm}}</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>   
                <div style="height:.5rem"></div>
                <div style="margin:0rem .14rem 0rem .14rem;">
                    <yd-button bgcolor="#2DC3E8" size="large" style="margin: .01rem;font-size:.5rem;font-weight:bold;color:white" @click.native="scanCode">我要找书</yd-button>
                </div> 
                <div style="height:.5rem"></div>
                <div style="margin:0rem .14rem 0rem .14rem;">
                    <yd-button bgcolor="#2DC3E8" size="large" style="margin: .01rem;font-size:.5rem;font-weight:bold;color:white" @click.native="openConfrim">解除绑定</yd-button>
                </div>  
            </div>
        </yd-layout>           
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
Vue.component(Layout.name, Layout);
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
import { Confirm, Toast, Notify } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    toast: Toast,
    notify: Notify,
};
export default {
    data() {
        return {
            formItem:{
                username:'',
                password:''
            },
            isShow:true,
            isTj:true,
            dzm: ''
        }
    },
    created(){
        if(window.localStorage.getItem("dztm") == null|| window.localStorage.getItem("dztm") == ''){
            this.getUser();
        }else{
            this.isShow = false;
            //this.dzm = window.localStorage.getItem("dztm")
            this.getUser();
        }
    },
    methods:{
        submit(){
            if(this.formItem.username == '' || this.formItem.password == ''){
                this.$dialog.toast({
                    mes: '请输入账号和密码',
                    timeout: 1500,
                    icon: 'error'
                });    
                return
            }else{
                this.isTj = false;
                var qs = require('querystring');
                let that_ = this;
                axios.post(          
                    "/api/libiary/binding",
                    qs.stringify({
                        username: that_.formItem.username,
                        password: that_.formItem.password       
                    })
                ).then(function(res){
                    console.log(res) 
                    if(res.data.msg === 'success'){
                        window.localStorage.setItem("dztm",that_.formItem.username) 
                        that_.$dialog.confirm({
                            title: '温馨提醒',
                            mes: '用户绑定成功！',
                            opts: [
                                {
                                    txt: '确定',
                                    color: true,
                                    callback: () => {
                                         that_.$router.push({path: '/redirect'});
                                    }
                                }
                            ]
                        });
                        //that_.$router.go(0);
                    }else{
                        that_.$dialog.confirm({
                            title: '温馨提醒',
                            mes: res.data.msg,
                            opts: [
                                {
                                    txt: '确定',
                                    color: true
                                }
                            ]
                        });
                        that_.isTj = true;
                    }
                }).catch(error=>{
                    console.log(error)
                    that_.isTj = true;
                })
            }       
        },
        //解绑
        openConfrim() {
            this.$dialog.confirm({
                title: '解除绑定',
                mes: '您确定解除微信绑定！',
                opts: () => {
                    this.jcbd();
                }
            });
        },
        jcbd(){
            let that_ = this;
            axios.post(
                "/api/libiary/rebinding",
            ).then(res =>{
                window.localStorage.setItem("dztm",'') 
                that_.$dialog.confirm({
                    title: '温馨提醒',
                    mes: '用户解绑成功',
                    opts: [
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                that_.$router.push({path: '/redirect'});
                            }
                        }
                    ]
                });
               
            })
        },
        scanCode(){
            this.$router.push({path: '/scanCode'});
        },
        getUser(){
            let that_ = this
            axios.get('/api/libiary/code',{
                params:{                  
                  appId:appId,
                  code:code,     
                },
                withCredentials:true
            })
            .then(function (res) {      
              console.log(res) 
              if(res.data.data.dztm == null || res.data.data.dztm== ''){
                  that_.isShow = true;
              }else{
                  window.localStorage.setItem("dztm",res.data.data.dztm)   
                  window.localStorage.setItem("name",res.data.data.name)  
                  that_.dzm = res.data.data.dztm
                  that_.isShow = false;      
              }                    
            })
            .catch(function (error) {
                console.log(error);
            }); 
        }
    }
}
</script>

<style>

</style>
    